<template>
    <div class="order-container">
        <div class="order-header">
          <p style="padding: 10px 50px 10px ;text-align: left;font-weight:bold">代购订单</p>
          <!-- <div style="height:2px;background-color:#909399"></div> -->
          <hr />
        </div>
        <div class="order-content">
            <!-- <div v-for="order in orderList" :key="order.id" class="order-holder">
                <div class="order-content-header">
                    <el-row>
                        <el-col span="4">订单号</el-col>
                        <el-col span="4">商品名称</el-col>
                        <el-col span="4">下单时间</el-col>
                        <el-col span="4">订单总金额</el-col>
                        <el-col span="4">订单状态</el-col>
                        <el-col span="4">操作</el-col>
                    </el-row>
                </div>
                <div class="order-content-main">
                    <el-row>
                        <el-col span="4">{{order.number}}</el-col>
                        <el-col span="4">{{order.product}}</el-col>
                        <el-col span="4">{{order.time}}</el-col>
                        <el-col span="4">￥{{order.price}}</el-col>
                        <el-col span="4">{{order.status}}</el-col>
                        <el-col span="4">
                            <el-button type="text">删除</el-button>
                        </el-col>
                    </el-row>
                </div>
            </div> -->
            <div class="order-content">
              <el-table
                class="order-table"
                :data="orderList"
                :row-class-name="tableRowClassName"
                border>
                <el-table-column
                  prop="number"
                  label="订单号"
                  width="180">
                </el-table-column>
                <el-table-column
                  prop="product"
                  label="商品名称"
                  width="180">
                </el-table-column>
                <el-table-column
                  prop="time"
                  label="下单时间">
                </el-table-column>
                <el-table-column
                  prop="price"
                  label="订单总金额">
                </el-table-column>
                <el-table-column
                  prop="status"
                  label="订单状态">
                </el-table-column>
              </el-table>
            </div>
        </div>
    </div>
</template>
  
<script>
export default {
  data() {
    return {
      orderList: [
        {
          id: 1,
          number: 12379796,
          product: '中华牙膏',
          time: '2017-12-12',
          price: '15',
          status: '已完成'
        },
        {
          id: 2,
          number: 12379796,
          product: '中华牙膏',
          time: '2017-12-22',
          price: '15',
          status: '未完成'
        }
      ]
    }
  },
  methods: {
    tableRowClassName({row, rowIndex}) {
      if (row.status === '已完成') {
        return 'success-row'
      }
      return ''
    }
  }
}
</script>
  
<style>
.order-container {
  margin-top: 50px;
  width: 1070px;
  /* height: 100%; */
  min-height: 500px;
  float: left;
  /* text-align: left; */
  /* border: 1px solid #DCDFE6; */
  background-color: #ffffff;
}
.order-content {
  margin-top: 50px;
  width: 1000px;
  /* height: 800px; */
  margin-left: auto;
  margin-right: auto;
}
.order-holder {
  float: left;
  width: 1000px;
  height: 100px;
  /* background-color:blue; */
  padding: 10px;
  margin-top: 5px;
  box-sizing: border-box;
  border: 1px solid #e4e7ed;
  text-align: left;
}
.order-content-header {
  font-size: 15px;
  font-weight: 500;
  color: #606266;
}
.order-content-main {
  text-align: left;
  margin-top: 15px;
  font-size: 12px;
  font-weight: 500;
}
.order-table {
  text-align: left;
  width:90%;
  margin-left: auto;
  margin-right: auto;
}
.order-table .success-row {
  background: #f0f9eb;
}
</style>
  

